---
title: "背景颜色"
# description: "Utilities for controlling an element's background color."
description: "用于控制元素背景色的功能类。"
features:
  responsive: true
  customizable: true
  hover: true
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/backgroundColor'
import { Heading } from '@/components/Heading'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin,
  preview: (css) => (
    <td
      className={css['background-color'] === 'transparent' ? 'bg-checkered' : undefined}
      style={{
        backgroundColor: Array.isArray(css['background-color'])
          ? css['background-color'][0]
          : css['background-color'],
      }}
    >
      <div className="w-24" />
    </td>
  ),
}

<!-- ## Usage -->
## 使用

<!-- Control the background color of an element using the `bg-{color}` utilities. -->
使用`bg-{color}`功能类控制元素的背景颜色。

```html emerald
<template preview>
  <div class="text-center">
    <button type="button" class="py-2 px-4 bg-emerald-500 text-white font-semibold rounded-lg shadow-md focus:outline-none" tabindex="-1">
      Click me
    </button>
  </div>
</template>

<button class="**bg-green-500** ...">Button</button>
```

<!-- ### Changing opacity -->
### 改变不透明度值

<!-- Control the opacity of an element's background color using the `bg-opacity-{amount}` utilities. -->
使用 `bg-opacity-{amount}` 功能类控制元素背景色的不透明度。

```html purple
<template preview>
  <div class="grid grid-cols-2 gap-2 sm:grid-cols-5">
    <div class="h-16 rounded-md bg-opacity-100 bg-purple-600 font-extrabold text-white flex justify-center items-center">100%</div>
    <div class="h-16 rounded-md bg-opacity-75 bg-purple-600 font-extrabold text-white flex justify-center items-center">75%</div>
    <div class="h-16 rounded-md bg-opacity-50 bg-purple-600 font-extrabold text-white flex justify-center items-center">50%</div>
    <div class="h-16 rounded-md bg-opacity-25 bg-purple-600 font-extrabold text-white flex justify-center items-center">25%</div>
    <div class="h-16 rounded-md bg-opacity-0 bg-purple-600 font-extrabold text-white flex justify-center items-center">0%</div>
  </div>
</template>

<div class="bg-purple-600 **bg-opacity-100** ..."></div>
<div class="bg-purple-600 **bg-opacity-75** ..."></div>
<div class="bg-purple-600 **bg-opacity-50** ..."></div>
<div class="bg-purple-600 **bg-opacity-25** ..."></div>
<div class="bg-purple-600 **bg-opacity-0** ..."></div>
```

<!-- Learn more in the [background opacity documentation](/docs/background-opacity). -->
在[背景不透明度文档](/docs/background-opacity)中了解更多。

<!-- ## Responsive -->
## 响应式

<!-- To control the background color of an element at a specific breakpoint, add a `{screen}:` prefix to any existing background color utility. For example, use `md:bg-green-500` to apply the `bg-green-500` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的背景色，请在任何现有的背景色功能类中添加 `{screen}:` 前缀。例如，使用 `md:bg-green-500` 来应用 `bg-green-500` 功能类在中等尺寸以上的屏幕上。

```html
<button class="bg-blue-500 **md:bg-green-500** ...">Button</button>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Hover -->
## 悬停

<!-- To control the background color of an element on hover, add the `hover:` prefix to any existing background color utility. For example, use `hover:bg-red-700` to apply the `bg-red-700` utility on hover. -->
要控制元素在悬停时的背景色，请在任何现有的背景色功能类中添加 `hover:` 前缀。例如，使用 `hover:bg-red-700` 在悬停时应用 `bg-red-700` 功能类。

```html rose
<template preview>
  <div class="text-center">
    <button type="button" class="py-2 px-4 bg-rose-500 text-white font-semibold rounded-lg shadow-md hover:bg-rose-700 focus:outline-none" tabindex="-1">
      Click me
    </button>
  </div>
</template>

<button class="bg-red-500 **hover:bg-red-700** ...">Button</button>
```

<!-- Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix. -->
悬停功能类也可以通过在 `hover:` 前缀前添加响应的 `{screen}:` 前缀来与响应式的功能类相结合。

```html
<button class="... md:bg-blue-500 **md:hover:bg-blue-700** ...">Button</button>
```

<!-- ## Focus -->
## 焦点

<!-- To control the background color of an element on focus, add the `focus:` prefix to any existing background color utility. For example, use `focus:bg-blue-500` to apply the `bg-blue-500` utility on focus. -->
要控制焦点元素的背景颜色，请在任何现有的背景颜色功能类中添加 `focus:` 缀。例如，使用 `focus:bg-blue-500` 在焦点上应用 `bg-blue-500` 功能类。

```html amber
<template preview>
  <div class="max-w-xs w-full mx-auto">
    <input class="border border-gray-400 bg-gray-200 focus:bg-white text-gray-900 appearance-none inline-block w-full border rounded py-3 px-4 focus:outline-none" placeholder="Focus me">
  </div>
</template>

<input class="bg-gray-200 **focus:bg-white** ...">
```

<!-- Focus utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `focus:` prefix. -->
通过在 `focus:` 前缀之前添加响应的 `{screen}:` 前缀，焦点功能类也可以与响应式的功能类相结合。

```html
<input class="... md:bg-gray-200 **md:focus:bg-white** ...">
```

<!-- ## Customizing -->
## 自定义 

### Background Colors

<!-- By default Tailwind makes the entire [default color palette](/docs/customizing-colors#default-color-palette) available as background colors. -->

<!-- You can [customize your color palette](/docs/colors#customizing) by editing the `theme.colors` variable in your `tailwind.config.js` file, or customize just your background colors using the `theme.backgroundColor` section of your Tailwind config. -->
默认情况下，Tailwind 将整个[默认调色板](/docs/customizing-colors#default-color-palette)作为背景色。

您可以通过编辑 `tailwind.config.js` 文件中的 `theme.colors` 变量来[自定义您的调色板](/docs/colors#-2)，或者使用 Tailwind 配置中的 `theme.backgroundColor` 部分来自定义背景色。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      backgroundColor: theme => ({
-       ...theme('colors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }
```

<!-- ### Variants -->
### 变体 

<Variants plugin="backgroundColor" />

<!-- ### Disabling -->
### 禁用 

<Disabling plugin="backgroundColor" />
